<template>
	<view class="videofilter"  @click="openShare()">视频滤镜</view>
	<view >
		
		<video :class="[isSelectClass]" id="video" width="400" height="300"  autoPlay playsInline></video>
		<uni-section title="选择滤镜属性" type="line">
		      <uni-data-select
		        v-model="value"
		        :localdata="range"
		        @change="change"
		        :clear="false"
		      ></uni-data-select>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "none",
				range: [
				  { value: "none", text: "没有滤镜" },
				  { value: "blur", text: "模糊" },
				  { value: "grayscale", text: "灰度" },
				   { value: "invert", text: "反转" },
				    { value: "sepia", text: "深褐色" },
				],
				isSelectClass:"none",
			}
		},
		methods: {
			async openShare(e){
				try{
					var mediaOpts = {
						  video: true
					}
					const stream = await navigator.mediaDevices.getUserMedia(mediaOpts);
					console.log('success');
					this.handleSuccess(stream);
		
				}catch(e){
					this.handleError(e);
				}
			},
				handleSuccess(stream){
			        //const video = this.refs['myVideo'];
					const video = document.querySelector('video');
					const videoTracks = stream.getVideoTracks();
					console.log('使用的设备是:' + videoTracks[0].label);
			        window.stream = stream;
			        video.srcObject = stream;
			    },
			
			    handleError(error){
			        console.log(error);
			    },
				change(e){
				        console.log(e);
						this.isSelectClass = e;
						
				}
		}
	}
</script>

<style  lang="scss">
	.videofilter{
		width: 233px;
		height: 33px;
		margin-top: 33px;
		display: inline-block;
		text-align: center;
		border: 3px;
		border-radius: 3px;
		background-color: bisque;
		margin-left: 23px;
	}
//没有滤镜
.none{
    -webkit-filter: none;
    filter: none;
}

//模糊
.blur{
    -webkit-filter: blur((3px));
    filter: blur((3px));
}
//灰度
.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
//反转
.invert {
    -webkit-filter: invert(1);
    filter: invert(1);
}
//深褐色
.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}
</style>
